<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">硕士学位申请系统</el-breadcrumb-item>
            <el-breadcrumb-item>我的科研成果</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row style="align-items: flex-start;">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    学术论文名称
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light">
                    作者排名
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    刊物名称
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light">
                    期刊类型
                </div>
            </el-col>
        </el-row>
        <div>

        </div>
        <el-row v-for="paper in papers">
            <el-col :span="6">
                <div class="grid-content bg-purple-light">
                    <el-input v-model="paper.resultName" placeholder="请输入论文名称"></el-input>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-input
                            style="width: 100%"
                            v-model="paper.writerRank"
                            placeholder="请输入作者排名"
                    ></el-input>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light">
                    <el-input
                            style="width: 100%"
                            v-model="paper.publicationName"
                            placeholder="请输入期刊名称"
                    ></el-input>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-input
                            style="width: 100%"
                            v-model="paper.publicationType"
                            placeholder="请输入期刊了类型"
                    ></el-input>
                </div>
            </el-col>
        </el-row>

    </div>
</template>

<style>
.el-row {
    height: 36px;
    line-height: 36px;
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

/*.el-autocomplete__input {*/
/*    text-align: center !important;*/
/*}*/

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>


<script>
import axios from "axios";

export default {
    data() {
        return {
            papers: [
                {
                    "resultName": "论文2",
                    "writerRank": "1",
                    "publicationName": "期刊xxx",
                    "publicationType": "xxx型会议"
                },
                {
                    "resultName": "论文2",
                    "writerRank": "1",
                    "publicationName": "期刊xxx",
                    "publicationType": "xxx型会议"
                }
            ],
            id: "",
        };
    },
    methods: {
        // 获取科研成果
        getPapers() {
            axios({
                url: `http://localhost:8888/results/list/${this.id}`,
                method: 'get',
                responseType: 'json',
            }).then(res => {
                this.papers = res.data.data;
            }).catch(err => {
                console.log(err);
            })
        }
    },
    mounted() {
        this.id = localStorage.getItem('username');
        this.getPapers();
    }
}
</script>